.nsc-container {
    position: relative !important;

    > .nsc-content {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: 100000;
        display: none;
        transition: width 0.3s ease-in-out;
    }

    > .nsc-content.active {
        display: block;
    }

    > .nsc-content.inactive {
        display: none;
    }

    > .nsc-content.loading {
        animation: breath 2s infinite ease-in-out;
        width: 0%;
        background: #c6ffdd;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #f7797d, #fbd786, #c6ffdd) !important;
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #f7797d, #fbd786, #c6ffdd) !important;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    > .nsc-content.error {
        animation: breath 0.5s infinite ease-in-out;
        background: var(--app-color-danger);
    }

    > .nsc-content.waring {
        animation: breath 0.5s infinite ease-in-out;
        background: var(--app-color-warning);
    }

    > .nsc-content.success {
        animation: breath 0.5s infinite ease-in-out;
        background: var(--app-color-success);
    }

    @keyframes breath {
        from {
            opacity: 0.5;
        }

        10% {
            opacity: 0.6;
        }

        20% {
            opacity: 0.7;
        }

        30% {
            opacity: 0.8;
        }

        40% {
            opacity: 0.9;
        }

        50% {
            opacity: 1;
        }

        60% {
            opacity: 0.9;
        }

        70% {
            opacity: 0.8;
        }

        80% {
            opacity: 0.7;
        }

        90% {
            opacity: 0.6;
        }

        to {
            opacity: 0.5;
        }
    }
}
